<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="viewport" id="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi" >
<title>PANDORA潘多拉珠宝</title>
<link rel="stylesheet" href="css/m.css?v=2">
<link rel="stylesheet" href="css/swiper.min.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://wximg.qq.com/wxp/libs/wxmoment/0.0.4/wxmoment.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-84291185-12"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-84291185-12');
</script>



</head>
<body>

<div id="loading" class="loading">
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
</div>


<div class="pc">
	<img src="img/qr-web.png" />
	<p>请在手机端微信打开</p>
</div>
<script type="text/javascript">
	var isMobile = {
	    Android: function() {
	        return navigator.userAgent.match(/Android/i) ? true : false;
	    },
	    BlackBerry: function() {
	        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
	    },
	    iOS: function() {
	        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
	    },
	    Windows: function() {
	        return navigator.userAgent.match(/IEMobile/i) ? true : false;
	    },
	    Windows2: function() {
	        return navigator.userAgent.match(/Windows Phone/i) ? true : false;
	    },
	    
	    any: function() {
	        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows() || isMobile.Windows2());
	    }
	};
	
	if(isMobile.any() == false){
		$('.pc').show();
	}
</script>


<div class="wrap" id="wrap">

    <!-- intro -->
    <div class="intro">
        <img src="img/btn-start.png" class="btn-start" />
				<div class="btn_skip"></div>
        <canvas id="canvas-intro" width="750" height="1450" style="background: url(img/bg/1.jpg);"></canvas>
    </div>

    <!-- 选择背景 -->
    <div class="select-bg">
				<!--logo-->
				<img src="img/logo-black.png" class="bgLogo"  black="img/logo-black.png" white="img/logo-white.png" />
        <!-- 摇一摇提示 -->
        <div class="shake-tips">
            <img src="img/shake-icon-black.png" black="img/shake-icon-black.png" white="img/shake-icon-white.png" class="shake-icon" />
            <img src="img/shake-icon-tips-black.png" black="img/shake-icon-tips-black.png" white="img/shake-icon-tips-white.png" class="shake-icon-tips" />
            <img src="img/shake-icon-around.png" />
        </div>

        <!-- 就它了 -->
        <div class="isit"></div>
        <img src="img/btn-selcet-comfim-black.png" black="img/btn-selcet-comfim-black.png" white="img/btn-selcet-comfim-white.png" class="btn-selcet-comfim" />
        

        <!-- swiper bg -->
        <div class="swiper-container" id="background">
            <div class="swiper-wrapper">
                <li class="swiper-slide"><img src="img/bg/1.jpg" status="black" qrcode="3"/></li>
                <li class="swiper-slide"><img src="img/bg/2.jpg" status="black" qrcode="3"/></li>
                <li class="swiper-slide"><img src="img/bg/3.jpg" status="white" qrcode="2"/></li>
                <li class="swiper-slide"><img src="img/bg/4.jpg" status="white" qrcode="2"/></li>
                <li class="swiper-slide"><img src="img/bg/5.jpg" status="white" qrcode="1"/></li>
                <li class="swiper-slide"><img src="img/bg/6.jpg" status="white" qrcode="1"/></li>
            </div>
        </div>
    </div>
		<!--选择提示-->
		<div  class="select_tips">
			<div class="tips_step1"><div class="btn_tips_step1"></div><img src="img/select_tips1.png" /></div>
			<div class="tips_step2"><div class="btn_tips_step2"></div><img src="img/select_tips2.png" /></div>
			<div class="tips_step3"><div class="btn_tips_step3"></div><img src="img/select_tips3.png" /></div>
		</div>
		
    <!-- 互动ugc -->
    <div class="ugc" style="z-index: 1;">

        <img src="img/btn-back-black.png" class="btn-back"  black="img/btn-back-black.png"  white="img/btn-back.png"  />
        <img src="img/btn-ok-black.png" class="btn-ok"  black="img/btn-ok-black.png"  white="img/btn-ok.png" />

        <canvas id="canvas-ugc" width="750" height="1450"></canvas>

        <!-- 底部图标选择器 -->
        <div class="select-icons">
						<div class="select_con">
							<!-- 人物选择 -->
							<li class="elements"  id="person">
									<div class="swiper-button-prev"></div>
									<div class="swiper-button-next"></div>
									<div class="swiper-container">
											<div class="swiper-wrapper">
												<div class="swiper-slide"><img src="img/ugc-1/1-black-small.png" black="img/ugc-1/black/1.png"  white="img/ugc-1/white/1.png" /></div>
												<div class="swiper-slide"><img src="img/ugc-1/2-black-small.png" black="img/ugc-1/black/2.png"  white="img/ugc-1/white/2.png"  /></div>
												<div class="swiper-slide"><img src="img/ugc-1/3-black-small.png" black="img/ugc-1/black/3.png"  white="img/ugc-1/white/3.png"  /></div>
												<div class="swiper-slide"><img src="img/ugc-1/4-black-small.png" black="img/ugc-1/black/4.png"  white="img/ugc-1/white/4.png"  /></div>
												<div class="swiper-slide"><img src="img/ugc-1/5-black-small.png" black="img/ugc-1/black/5.png"  white="img/ugc-1/white/5.png"  /></div>
												<div class="swiper-slide"><img src="img/ugc-1/6-black-small.png" black="img/ugc-1/black/6.png"  white="img/ugc-1/white/6.png"  /></div>
											</div>
									</div>
							</li>
							<!-- 礼物选择 -->
							<li class="elements"  id="gift">
									<div class="swiper-button-prev"></div>
									<div class="swiper-button-next"></div>
									<div class="swiper-container">
											<div class="swiper-wrapper">
													<div class="swiper-slide"><img src="img/ugc-2/1-black-small.png?r1" black="img/ugc-2/black/1.png?r1"  white="img/ugc-2/white/1.png?r1" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/2-black-small.png" black="img/ugc-2/black/2.png"  white="img/ugc-2/white/2.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/3-black-small.png" black="img/ugc-2/black/3.png"  white="img/ugc-2/white/3.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/4-black-small.png" black="img/ugc-2/black/4.png"  white="img/ugc-2/white/4.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/5-black-small.png" black="img/ugc-2/black/5.png"  white="img/ugc-2/white/5.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/6-black-small.png" black="img/ugc-2/black/6.png"  white="img/ugc-2/white/6.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/7-black-small.png" black="img/ugc-2/black/7.png"  white="img/ugc-2/white/7.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/8-black-small.png" black="img/ugc-2/black/8.png"  white="img/ugc-2/white/8.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/9-black-small.png" black="img/ugc-2/black/9.png"  white="img/ugc-2/white/9.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/10-black-small.png" black="img/ugc-2/black/10.png"  white="img/ugc-2/white/10.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/11-black-small.png" black="img/ugc-2/black/11.png"  white="img/ugc-2/white/11.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/12-black-small.png" black="img/ugc-2/black/12.png"  white="img/ugc-2/white/12.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/13-black-small.png" black="img/ugc-2/black/13.png"  white="img/ugc-2/white/13.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/14-black-small.png" black="img/ugc-2/black/14.png"  white="img/ugc-2/white/14.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-2/15-black-small.png" black="img/ugc-2/black/15.png"  white="img/ugc-2/white/15.png" /></div>
											</div>
									</div>
							</li>
							<!-- 文字气泡 -->
							<li class="elements"  id="say">
									<div class="swiper-button-prev"></div>
									<div class="swiper-button-next"></div>
									<div class="swiper-container">
											<div class="swiper-wrapper">
													<div class="swiper-slide"><img src="img/ugc-3/1-black-small.png" bigImg="img/ugc-3/big/1-black-small.png" /></div>
													<div class="swiper-slide"><img src="img/ugc-3/2-black-small.png" bigImg="img/ugc-3/big/2-black-small.png"  /></div>
													<div class="swiper-slide"><img src="img/ugc-3/3-black-small.png" bigImg="img/ugc-3/big/3-black-small.png"  /></div>
													<div class="swiper-slide"><img src="img/ugc-3/4-black-small.png" bigImg="img/ugc-3/big/4-black-small.png"  /></div>
													<div class="swiper-slide"><img src="img/ugc-3/5-black-small.png" bigImg="img/ugc-3/big/5-black-small.png"  /></div>
													<div class="swiper-slide"><img src="img/ugc-3/6-black-small.png" bigImg="img/ugc-3/big/6-black-small.png"  /></div>
											</div>
									</div>
							</li>
						</div>
            

            <!-- 三个标签 -->
            <div class="labels">
                <li><img src="img/icon-1.png" /></li>
                <li><img src="img/icon-2.png" /></li>
                <li><img src="img/icon-3.png" /></li>
            </div>

        </div>
				
				<!--文字选择-->
				<div class="text_con">
					<div class="elements" style="background: url('img/icon-bg-1.png');" id="text">
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
							<div class="swiper-container">
									<div class="swiper-wrapper">
											<div class="swiper-slide"><img src="img/text/1.png" black="img/text/black/b1.png" white="img/text/white/w1.png" /></div>
											<div class="swiper-slide"><img src="img/text/2.png" black="img/text/black/b2.png" white="img/text/white/w2.png"  /></div>
											<div class="swiper-slide"><img src="img/text/3.png" black="img/text/black/b3.png" white="img/text/white/w3.png"  /></div>
											<div class="swiper-slide"><img src="img/text/4.png" black="img/text/black/b4.png" white="img/text/white/w4.png"  /></div>
											<div class="swiper-slide"><img src="img/text/5.png" black="img/text/black/b5.png" white="img/text/white/w5.png"  /></div>
											<div class="swiper-slide"><img src="img/text/6.png" black="img/text/black/b6.png" white="img/text/white/w6.png"  /></div>
									</div>
							</div>
					</div>
					<div class="tips">
						<img src="img/text_tips.png" class="tips_img" />
					</div>
				</div>
    </div>

    <!-- 结果页 -->
    <div class="result">
        <img src="" class="temp" width="750" height="1450" />
		<img src="" class="temp_save" width="750" height="1450" />
        <img src="img/save-tips-black.png" black="img/save-tips-black.png" white="img/save-tips-white.png" class="save-tips" />
        <img src="img/btn-chakan-black.png" black='img/btn-chakan-black.png' white="img/btn-chakan-white.png" class="btn-chakan" />
        <img src="img/btn-replay-black.png" black="img/btn-replay-black.png" white="img/btn-replay-white.png" class="btn-replay" />
		<a href="https://cn.pandora.net/zh/collections/friendship-collection?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/btn-home-black.png" black="img/btn-home-black.png" white="img/btn-home-white.png" class="btn-home-black" /></a>
    </div>
    
    

	<!-- 查看产品 -->
    <div class="products">
		<div class="product_box">
			<img src="img/btn-close.png" class="btn-close"/>
			<div class="product_con">
				<ul>
					<li>
						<a href="https://cn.pandora.net/zh/charms/charms/贝拉机器人串饰/797141EN160.html?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/product-1.jpg" alt="贝拉机器人" /></a>
					</li>
					<li>
						<a href="https://cn.pandora.net/zh/charms/charms/独角兽布鲁诺串饰/797609.html?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/product-2.jpg" alt="独角兽布鲁诺" /></a>
					</li>
					<li>
						<a href="https://cn.pandora.net/zh/charms/charms/西奥多熊串饰/767236.html?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/product-3.jpg" alt="西奥多熊" /></a>
					</li>
					<li>
						<a href="https://cn.pandora.net/zh/charms/charms/宇航员汤米串饰/797561CZ.html?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/product-4.jpg" alt="宇航员汤米" /></a>
					</li>
					<li>
						<a href="https://cn.pandora.net/zh/charms/charms/幸福驯鹿串饰/787514CZ.html?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/product-5.jpg" alt="幸福驯鹿" /></a>
					</li>
					<li>
						<a href="https://cn.pandora.net/zh/charms/charms/小波比串饰/797551EN12.html?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/product-6.jpg" alt="小波比" /></a>
					</li>
				</ul>
			</div>
		</div>

		<a href="https://cn.pandora.net/zh/collections/friendship-collection?cid=soco:customcontent:e:zh-cn::::CHR18:ot:::LEO-H5"><img src="img/btn-home-black.png" black="img/btn-home-black.png" white="img/btn-home-white.png" class="btn-home-black" style="opacity: 0" /></a>
    </div>
	

</div>




</body>
</html>


<script type="text/javascript" src="js/libs/createjs.min.js"></script>
<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/jquery.cookie.js"></script>
<script type="text/javascript" src="js/libs/swiper.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/libs/TweenMax.min.js"></script>
<script type="text/javascript" src="js/libs/hammer.min.js"></script>
<script src="intro.js?1"></script>
<script src="ugc.js?1"></script>
<script type="text/javascript" src="js/code.js?r1"></script>
<script type="text/javascript" src="js/main.js?r0.2"></script>
<script type="text/javascript" src="js/share-jiaoai.js"></script>



